<template>
 <el-main>
  <div class="banner">
   <img src="../../../assets/miningBg.png" alt="">
   <div class="info">
    <h1>{{ $t('productDetails.title') }}</h1>

<!--    <div class="down">
     <h6>{{ $t('productDetails.time') }}</h6>
     <p class="time">7{{ $t('productDetails.d') }} 17{{ $t('productDetails.h') }} 39{{ $t('productDetails.m') }} 30{{ $t('productDetails.s') }}</p>
    </div>-->
   </div>
  </div>

  <div class="mainContent">
   <div class="item-bg base-info" v-loading="loading">
    <div class="tips">
     <p class="font-new">{{ $t('productDetails.annual') }}</p>
     <p class="num font-new"><span>{{ data.sellPrice }} CTB</span> / {{ data.totalPrice }} CTB</p>
    </div>

    <div class="base">
     <div class="rate">
      <p>{{ data.rateAmount }}%</p>
      <span>{{ $t('productDetails.rate') }} {{ data.rate }}%</span>
     </div>

     <el-progress :text-inside="true" :stroke-width="7" :percentage="parseInt(data.sellRate)" color="#0d4fa5"></el-progress>
    </div>

    <div class="info">
     <ul class="ul">
      <li><p>{{ $t('productDetails.locked') }}</p><p>{{ data.days }}</p></li>
      <li><p>{{ $t('productDetails.start') }}</p><p>2021-01-27 12:00:00</p></li>
      <li><p>{{ $t('productDetails.amounts') }}</p><p>11000 HBAR</p></li>
     </ul>

     <div class="buy">
      <div class="top">
       <p>{{ $t('productDetails.quote') }} <span>0</span></p>
       <a @click="withdrawal">{{ $t('productDetails.purchase') }} HBAR</a>
      </div>

      <div class="input-box">
       <div class="input">
        <input type="text" v-model="ruleForm.amount" :placeholder="$t('productDetails.amounts')" class="font-new">
        <span @click="max">| {{ $t('productDetails.max') }}</span>
       </div>
       <el-button type="primary" @click="submit">{{ $t('productDetails.lock') }}</el-button>
      </div>
     </div>
    </div>
   </div>

   <div class="item-bg norms">
    <h6 class="title-left">
     {{ $t('productDetails.title1') }}
    </h6>

    <table cellpadding="0" cellspacing="0" border="0">
     <thead>
     <tr>
      <th>{{ $t('productDetails.th1') }}</th>
      <th>{{ $t('productDetails.th2') }}</th>
      <th>{{ $t('productDetails.th3') }}</th>
      <th>{{ $t('productDetails.th4') }}</th>
     </tr>
     </thead>
     <tbody>
     <tr>
      <td>HBAR</td>
      <td>10</td>
      <td>4200/11000</td>
      <td>700000</td>
     </tr>
     </tbody>
    </table>
   </div>

   <div class="item-bg rule">
    <h6>{{ $t('productDetails.title2') }}</h6>
    <p v-html="$t('productDetails.text2')" class="info"></p>
   </div>

   <div class="item-bg introduce">
    <h6>{{ $t('productDetails.title3') }}</h6>
    <p v-html="$t('productDetails.text3')"></p>
   </div>
  </div>

  <el-dialog :title="$t('user.setting.label3')" :visible.sync="dialog" width="450px">
   <el-form :model="ruleForm">
    <el-form-item>
     <el-input v-model="ruleForm.password" type="password" autocomplete="off"></el-input>
    </el-form-item>
   </el-form>

   <div slot="footer" class="dialog-footer">
    <el-button @click="dialog = false">{{ $t('common.tips.t8') }}</el-button>
    <el-button type="primary" @click="buy">{{ $t('common.tips.t7') }}</el-button>
   </div>
  </el-dialog>
 </el-main>
</template>

<script>
export default {
 name: "Details",
 data: () => ({
  data: '',
  dialog: false,

  loading: false,

  ruleForm: {
   amount: '',
   password: ''
  }
 }),
 created() {
  this.data = this.$route.query
 },
 methods: {
  // 购买
  withdrawal () {
   this.$router.push({
    path: '/Withdrawal'
   })
  },

  // 自动填入最大值
  max() {
   this.ruleForm.amount = this.$route.query.maxPrice
  },

  // 购买锁仓
  submit() {
   if (this.ruleForm.amount === '') {
    this.$message.error(this.$t('common.error.t15'))
   } else {
    this.dialog = true
   }
  },

  // 提交
  buy() {
   if (this.ruleForm.password === '') {
    this.$message.error(this.$t('common.error.t13'))
   } else {
    this.loading = true
    this.$post(this.$address.exchange, {
     data: this.ruleForm
    }).then(res => {
     this.dialog = false
     this.loading = false
     if (res.code === 1) {
      this.$message.success(this.$t('common.success.t5'))
      this.ruleForm.amount = ''
      this.ruleForm.password = ''
     } else {
      this.ruleForm.password = ''
     }
    })
   }
  }
 },
}
</script>

<style scoped lang="scss">
.el-main {
 padding: 50px 0 0;
 background-color: #ffffff;

 .banner {
  width: 100%;
  background: #2e26a3;
  min-height: 350px;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;

  img {
   margin-top: auto;
   width: 100%;
  }

  .info {
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   display: block;
   width: 100%;
   text-align: center;

   h1 {
    font-size: 60px;
    color: #fff;
    margin-bottom: 10px;
   }

   .down {
    border-radius: 4px;
    min-width: 600px;
    display: inline-block;
    background-color: rgba(255,255,255,0.4);
    padding: 20px 30px 30px;

    h6 {
     font-size: 22px;
     text-align: left;
     color: #ffffff;
     font-weight: normal;
    }
    p {
     letter-spacing: 10px;
     font-size: 36px;
     font-weight: bold;
     padding-top: 15px;
     text-align: center;
     color: #ffffff;
    }
   }
  }
 }

 .mainContent {
  max-width: 960px;
  margin: 0 auto 50px;
  width: 912px;

  .item-bg {
   background-color: #F5FAFF;
   border-radius: 8px;
   margin-bottom: 10px;

   &.base-info {
    transform: translateY(-50px);
    padding: 70px 30px 50px;

    .tips {
     display: flex;
     align-items: center;
     justify-content: space-between;

     .font-new {
      color: #959ca2;
      font-size: 18px;
     }

     .num {
      color: #000000;
      font-size: 14px;
      span {
       color: #0D4FA5;
      }
     }
    }

    .base {
     display: flex;
     align-items: center;
     margin-bottom: 40px;
     .rate {
      flex: 1 1 auto;
      width: 1%;
      color: #01b364;
      display: flex;
      align-items: baseline;

      p {
       font-size: 40px;
       font-weight: bold;
      }
      span {
       margin-left: 10px;
       font-size: 12px;
       padding: 4px 6px;
       border-radius: 4px;
       background-color: #ebf8f0;
       font-weight: bold;
      }
     }

     .el-progress {
      width: 400px;
      /deep/ .el-progress-bar {
       .el-progress-bar__outer {
        overflow: inherit;
        .el-progress-bar__inner {
         .el-progress-bar__innerText {
          background-color: #0d4fa5;
          -webkit-transform: translateY(-35%);
          transform: translateY(-35%);
          padding: 2px 6px;
          border-radius: 100px;
          margin: 0;
         }
        }
       }
      }
     }
    }

    .info {
     display: flex;

     ul {
      width: 1%;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;

      li {
       display: flex;
       margin-bottom: 10px;

       p {
        &:nth-of-type(1) {
         font-size: 14px;
         color: #a0a5a9;
         min-width: 180px;
         margin-right: 10px;
        }
        &:nth-of-type(2) {
         flex: 1;
         font-size: 14px;
         color: #151515;
         min-width: 180px;
        }
       }
      }
     }

     .buy {
      width: 400px;
      display: flex;
      flex-direction: column;

      .top {
       margin-bottom: auto;
       display: flex;
       align-items: center;

       p {
        font-size: 14px;
        color: #a0a5a9;
        margin-right: 20px;
        span {
         color: #000;
        }
       }

       a {
        color: #0D4FA5;
        cursor: pointer;
        padding-left: 20px;
       }
      }

      .input-box {
       display: flex;
       align-items: center;
       margin-top: auto;

       .input {
        flex: 1;
        background-color: #fff;
        color: #000000;
        display: flex;
        font-size: 18px;
        justify-content: center;
        align-items: center;
        padding: 0 16px 0 0;

        input {
         min-width: 10px;
         flex: 1;
         height: 36px;
         background-color: transparent;
         font-size: 18px;
         outline: none;
         border: 0;
         text-indent: 16px;
        }

        span {
         padding-left: 10px;
         font-size: 14px;
         color: #0D4FA5;
         cursor: pointer;
        }
       }

       .el-button {
        cursor: pointer;
        min-width: 100px;
        text-align: center;
        margin-left: 12px;
        font-size: 18px;
        border: none;
        color: #fff;
        background-color: #0D4FA5;
        border-radius: 6px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
       }
      }
     }
    }
   }

   >h6 {
    padding: 2px 10px 2px 30px;
    font-size: 24px;
    color: #151515;
    border-left: 4px solid #151515;
    margin-bottom: 30px;
   }
   >p {
    padding: 0 40px;
    color: grey;
    font-size: 13px;
    line-height: 20px;
   }
   &.norms,&.rule,&.introduce {
    padding: 10px 10px 45px 10px;
   }

   &.norms {
    padding-bottom: 45px;
    table {
     width: 100%;
     padding: 0 40px;
     font-size: 18px;

     th,td {
      font-weight: normal;
      text-align: center;
      font-size: 14px;
     }
     th {
      color: #a0a5a9;
      padding: 0 15px 44px;
     }
     td {
      background-color: #Ffffff;
      padding: 20px 15px;
     }
    }
   }
  }
 }
}
</style>
